<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus from '../components/tabComponents/groupStatus.vue'
  import MachineDetail from '../components/tabComponents/machineDetail.vue'
  import SingleIngotDetail from '../components/tabComponents/roving/singleIngotDetail.vue'
  import CopStatistics from '../components/tabComponents/roving/copStatistics.vue'
  import CreelingPrediction from '../components/tabComponents/roving/creelingPrediction.vue'
  import AbnormalAnalysis from '../components/tabComponents/abnormalAnalysis.vue'
  import ChangeSettings from '../components/tabComponents/changeSettings.vue'
  import HistoricalTrendChart from '../components/tabComponents/historicalTrendChart/index.vue'

  const tabname = ref()

  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '11410',
      label: '状态总览',
      roles: ['11410'],
      slots: { default: h(GroupStatus, { statusCode: '11410', processName: '粗纱' }) }
    },
    {
      name: '11420',
      label: '单机详情',
      roles: ['11420'],
      slots: { default: h(MachineDetail, { statusCode: '11420', processName: '粗纱' }) }
    },
    {
      name: '11470',
      label: '单锭详情',
      roles: ['11470'],
      slots: {
        default: h(SingleIngotDetail, { statusCode: '11470', processName: '粗纱' })
      }
    },
    {
      name: '11430',
      label: '管纱统计',
      roles: ['11430'],
      slots: { default: h(CopStatistics, { statusCode: '11430', processName: '粗纱' }) }
    },
    {
      name: '11480',
      label: '换筒预测',
      roles: ['11480'],
      slots: { default: h(CreelingPrediction, { statusCode: '11480', processName: '粗纱' }) }
    },
    {
      name: '11440',
      label: '异常分析',
      roles: ['11440'],
      slots: { default: h(AbnormalAnalysis, { statusCode: '11440', processName: '粗纱' }) }
    },
    {
      name: '11460',
      label: '设置变更',
      roles: ['11460'],
      slots: { default: h(ChangeSettings, { statusCode: '11460', processName: '粗纱' }) }
    },
    {
      name: '11450',
      label: '历史趋势图',
      roles: ['11450'],
      slots: { default: h(HistoricalTrendChart, { statusCode: '11450', processName: '粗纱' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
